<template>
  <div class="bg-white absolute bottom-0 border-t border-gray-200 px-4 py-2 flex items-center justify-between text-sm text-gray-600">
    <!-- 左侧状态信息 -->
    <div class="flex items-center space-x-4">
      <span class="flex items-center">
        <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
        {{ status }}
      </span>
      <span>•</span>
      <span>项目大小: {{ projectSize }}</span>
      <span>•</span>
      <span>对象数量: {{ objectCount }}</span>
      <span>•</span>
      <span>图层数量: {{ layerCount }}</span>
    </div>

    <!-- 右侧性能信息 -->
    <div class="flex items-center space-x-4">
      <span>FPS: {{ fps }}</span>
      <span>•</span>
      <span>内存: {{ memoryUsage }}</span>
      <span>•</span>
      <span>渲染时间: {{ renderTime }}ms</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useProjectStore, useLayerStore } from '@/stores'

// Pinia Stores
const projectStore = useProjectStore()
const layerStore = useLayerStore()

// 响应式数据
const status = ref('就绪')
const fps = ref(60)
const memoryUsage = ref('45MB')
const renderTime = ref(16)

// 计算属性 - 从Pinia获取数据
const projectSize = computed(() => projectStore.projectSize)
const objectCount = computed(() => {
  let count = 0
  layerStore.layers.forEach(layer => {
    count += layer.objects.length
  })
  return count
})
const layerCount = computed(() => layerStore.layers.length)

// 性能监控
let fpsCounter = 0
let lastTime = performance.now()
let animationId = null

// 计算FPS
const updateFPS = () => {
  const currentTime = performance.now()
  fpsCounter++
  
  if (currentTime - lastTime >= 1000) {
    fps.value = fpsCounter
    fpsCounter = 0
    lastTime = currentTime
  }
  
  animationId = requestAnimationFrame(updateFPS)
}

// 模拟性能数据更新
const updatePerformanceData = () => {
  // 模拟内存使用变化
  const baseMemory = 45
  const variation = Math.random() * 10 - 5
  memoryUsage.value = `${Math.round(baseMemory + variation)}MB`
  
  // 模拟渲染时间变化
  const baseRenderTime = 16
  const renderVariation = Math.random() * 8 - 4
  renderTime.value = Math.round(baseRenderTime + renderVariation)
}

// 生命周期
onMounted(() => {
  // 启动FPS监控
  updateFPS()
  
  // 定期更新性能数据
  const performanceInterval = setInterval(updatePerformanceData, 2000)
  
  // 清理定时器
  onUnmounted(() => {
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
    clearInterval(performanceInterval)
  })
})

// 暴露方法给父组件
const updateStatus = (newStatus) => {
  status.value = newStatus
}

defineExpose({
  updateStatus
})
</script>

<style scoped>
/* 状态栏样式 */
</style>
